<script>
import { loadAdminCourse, removeAdminCourse } from '@/api/admin/classpage'

export default {
    data() {
        return {
            totle: 0,
            params: {
                pageNo: 1,
                pageSize: 10,
                major: "",
                department: "",
                cname: ""
            },
            list: []
        }


    },
    methods: {
        async initCourseData() {
            let data = await loadAdminCourse(this.params)
            // console.log(data);

            this.totle = data.total
            this.list = data.list
        },
        async deleteCourse(row) {
            await removeAdminCourse(row.course_id)
            ElNotification.success({
                title: `“${row.course_name}”删除成功`,
            })
            this.initCourseData()
        },
    },
    created() {
        this.initCourseData()
    },
}
</script>

<template>
    <el-card>
        <template #header>班级管理</template>
        <div class="chaxun">
            <div class="lefter">
                <el-input placeholder="系名" />
                <el-input placeholder="专业名" />
                <el-input placeholder="名" />
                <el-button type="primary" @click="initCourseData()">查询</el-button>
            </div>
            <div class="righter">
                <el-button type="success">+新增</el-button>
            </div>
        </div>

        <el-table style="width: 100%" border :data="list" stripe>
            <!-- <template #empty>
                <el-result title="暂无数据">
                    <template #icon>
                        <el-icon size="50"><EpBox /></el-icon>
                    </template>
                </el-result>
            </template> -->
            <el-table-column label="序号" type="index" width="60px" />
            <el-table-column label="班级名" prop="class_name"></el-table-column>
            <el-table-column label="年级" prop="class_grade"></el-table-column>
            <el-table-column label="所属专业" prop="major_name"></el-table-column>
            <el-table-column label="所属系" prop="department_name"></el-table-column>
            <el-table-column label="操作">
                <el-button type="primary" link>编辑</el-button>
                <el-button type="danger" link>删除</el-button>
            </el-table-column>
        </el-table>
        <el-pagination 
        size="small"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :total="totle"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNo"
      @change="initCourseData()"
         />
    </el-card>
</template>
<style>
.chaxun {
    margin-bottom: 10px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.lefter {
    display: flex;
    width: 50%;
}

.lefter .el-input__wrapper {
    margin-right: 5px;
}

.righter {
    display: flex;
    flex-grow: 1;
    flex-direction: row-reverse;
}
</style>